- 1 -

相同元素优化

页面中相同元素可以直接放在舞台下面，不再单独放在每一个页面中。比如统一的背景、整个H5统一的背景音乐。

- 2 -

首页的优化

首页放的内容尽量少些，在舞台下调整预加载页面数，减少整个案例的加载时间。在首页显示过程中，加载后面页面数。

- 3 -

资源使用优化

工具占用的资源从小到大排列的顺序是：页面 < 面板 < 动效 < 时间轴 < 滑动时间轴 ，所以为了节省资源，优化案例，能用前者的情况下就不用后者。

- 4 -

图片放置位置优化

图片资源太大的情况下，可以在案例开始前，添加加载图，把所有素材放在舞台下，在加载图播放时，一次性加载完所有素材资源，放弃最初的加载速度，提高浏览体验。当所有素材都已经加载完成之后，我们只需要通过控制图片的置顶或者置底来实现我们需要的效果。

- 5 -

图片大小优化

减少图片大小的方法——素材尽量采用单一色彩的绘图方式完成。例如：

上面三张图长宽的像素都相同，第一张大小为9kb，第二张53kb，第三张是87kb。对于H5来说，流畅度往往比画面的精细程度更加重要。

- 6 -

素材优化

1.图片优化：根据需求设计相应素材大小，避免造成图片质量剩余。iH5平台一般通用案例图片宽高为 640 * 1040 px

2.图片需要压缩：图片质量越小，加载越高效。推荐在线压缩网站： tinypng.com

3.合并图片：把单独的元件合并到背景图片，也可以把相同的元件合并成一张图片。

- 7 -

制作方法优化

1.用动效取代时间轴

大家在制作动画效果时，优先选择使用动效，如果动效没有适合的效果，再选择时间轴。

2.时间轴优化

• 能合并的时间尽量合并，不需要显示的元素可以通过调整透明度来使其隐藏；

• 在不影响动画效果的情况下，不同轨迹上的关键帧可以略微错开一些；
  

• 注意时间轴时长的合理分配，避免同一时间运行过多关键帧；

3.画布优化

• 将时间轴或滑动时间轴放在画布下，动画部分放在画布中，触发动画效果的部分放在画布外，通过事件控制动画的调度执行；

• 当序列帧非常多时，可以用放在画布下的图片序列控件来实现，记得设置预加载（“预加载完成”和“全部加载完成”事件）

- 8 -

逻辑优化

1.预加载优化

• 如果设定的与加载页面数过多，会影响案例打开的速度，可以设置在第一页显示的时候，更改舞台的预加载页数实现后面页数的加载，优化案例体验；

• 测试类案例，如果是通过点击翻页的，可以把测试结果放在第二页上面。

2.图片显示逻辑优化

• 如果图片初始显示为no或者在对象树上去掉图片的勾选，图片是不会预加载的。如果担心大图加载慢影响事件的触发，可以在舞台下面添加事件“初始化完成→隐藏图片”。

3.顺序优化

• 同一时间触发的动作越少越好，可适当用先后顺序触发，如“时间轴为N时触发某个事件”；

• 动效的执行最好使用事件控制，避免多个动效自动播放，因为动效即便是设置了延时也是同一时间触发的。

• 通过时间轴播放结束的事件，开始执行其他动作，如动效开始播放、时间轴开始播放等；

4.事件优化

• 巧妙利用“隐藏同层控件”事件减少事件的数量；

5.控制计数器的数量

• 当有N个结果需要显示时，可以使用“计数器范围”属性来实现，或者添加数据库事件，一个事件启用计数器下所有事件；

6.数据库的应用优化

• 对象树下有数据库的，可以直接限制数据库的提交次数；无需后台记录结果的，可以用数据库整数变量限制投票或者点赞次数；如果数量很大，可以分页面来显示。

• 无需前端实时刷新数据库时，比如排名、点赞数，可以避免时间轴循环播放而重复输出数据或者重复赋值，改用通过按钮点击来输出实时数据。

• 当有多组数据输出时，可以通过禁用不需要执行的输出事件来减少输出运算。

7.妙用父对象

• 直接控制父对象要优于逐个控制父对象下的子对象。例如运算方式中需要变换目标位置的案例，可以把需要变换的元素放在同一父对象下，直接变换父对象目标位置，借助父对象减少运算；

• 如果用到碰撞，可在父对象设置碰撞，减少碰撞事件的运算，而且把碰撞加在画布下会流畅很多；

8.运算优化

• 用最简式运算方法，例如（700-200）* $a 简化成 500 * $a；